import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";
import News from "@/views/News.vue";
import Message from "@/views/Message.vue";
import Detail from "@/views/Detail.vue";

Vue.use(VueRouter)

const routes = [
    {
        path: '/home',
        name:"home",
        component: Home,
        children: [
            {
                path: 'news',
                name:"news",
                component: News,
            },
            {
                path: 'message',
                name:"message",
                component: Message,
                children:[
                    {
                        path: 'detail/:title/:id',
                        name:"detail",
                        component: Detail,
                        //路由props的第一种写法：值为对象，该对象中的所有key：value都会以props的形式传递给Detail组件
                        /*props:{id:"001",title:"hello"}*/

                        //路由props的第二种写法：值为布尔值，如果为布尔值，就会把路由组件接收到的所有params参数以props的形式传递给Detail组件
                        /*props:true,*/

                        //路由props的第三种写法：值为函数，
                        props($route){
                            return {id:$route.params.id,title:$route.params.title}
                        }

                    }
                ]
            }
        ]
    },
    {path: '/about', component: About},

]

const router = new VueRouter({
    routes
})

export default router
